<template>
  <div class="huxing">
    <h3>附近门店</h3>
    <span>只生活,不漂泊,你值得一寓</span>
    <p @click="jumpTomd()">查看更多 ></p>
    <ul class="slide-box">
      <li
        @click="jump2(item.boyu_mid)"
        class="slide-item1"
        v-for="(item, index) of boyu_mstore"
        :key="index"
      >
        <div class="img1-items">
          <img :src="item.boyu_mphoto" />
        </div>
        <p>{{ item.boyu_mname }}</p>
        <div class="flexss">
          <span>{{ item.boyu_mnumber }}</span>
          <span class="price">
            <span>{{ item.boyu_mprice.slice(0, -3) }}</span>
            元/月
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>
<style scoped>
.huxing {
  padding-left: 14px;
  padding-right: 14px;
}

.huxing > h3 {
  margin-bottom: 5px;
}

.huxing > span {
  color: #666;
}

.huxing > p {
  font-size: 14px;
  color: #888;
  float: right;
  margin-top: -22px;
}

ul,
li {
  list-style: none;
}

/*隐藏掉滚动条*/
.slide-box::-webkit-scrollbar {
  display: none;
}

.slide-box {
  margin-top: 20px;
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}

.slide-item {
  width: 210px;
  /* border: 1px solid #fff; */
  margin-right: 10px;
  border-radius: 5px;
}

.slide-item > p {
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 2px;
}

.price > span {
  color: burlywood;
}
</style>
<script>
export default {
  data() {
    return {
      boyu_mstore: [],
    };
  },
  mounted() {
    this.axios.get("/mstore").then((res) => {
      this.boyu_mstore = res.data.results;
    });
  },
  methods: {
    jump2(kw) {
      this.$router.push({
        path: "/mendian",
        query: {
          hid: kw,
        },
      });
    },
    jumpTomd(kw) {
      this.$router.push({
        path: "/md",
      });
    },
  },
};
</script>